<template>
	<view class="container020">
		<apptop :toplevel="2"></apptop>
		<view class="whitebg">
			<view class="tabnavi">
				<view class="nli" :class="{'ncur':nli==0}" @click="changenavi(0)">
					可带剧本
				</view>
				<view class="nli" :class="{'ncur':nli==1}" @click="changenavi(1)">
					门店剧本
				</view>
				<view class="nli" :class="{'ncur':nli==2}" @click="changenavi(2)">
					所有剧本
				</view>
			</view>
			<view class="listul">
				<view class="ksearch">
					<input type="text" confirm-type="search" @confirm="searchStart()" placeholder="请输入关键词搜索" v-model.trim="keyword" />
					<view class="search-icon">
						<text class="iconfont">&#xe689;</text>
					</view>
				</view>
				<block v-for="(v,k) in list" :key="k">
					<view class="con-flex listli">
						<image :src="v.img" mode="aspectFill" class="simage"></image>
						<view class="sinfo con-flex flex_between">
							<view class="l">
								<view class="tt">
									{{v.title}}
								</view>
								<view>
									<view class="shopbox" v-if="nli<2">
										<view class="shopli sli" v-for="(vv,kk) in v.shop" :key="kk">
											<view>
												{{vv.treeName}} {{vv.site}}
											</view>
											<view>
												¥{{vv.vipprice}} | ¥{{vv.price}}
											</view>
										</view>
									</view>
									<view class="shopbox" v-else>
										<block v-if="v.showshopmore==0">
											<block v-if="v.shop.length > 5">
												<view class="shopli sli" v-for="(vv,kk) in v.shop" v-show="kk < 5" :key="kk">
													{{vv.treeName}}
												</view>
												<view class="shopli smore" @click="v.showshopmore = 1">
													更多…
												</view>
											</block>
											<block v-else>
												<view class="shopli sli" v-for="(vv,kk) in v.shop" :key="kk">
													{{vv.treeName}}
												</view>
											</block>
										</block>
										<block v-else>
											<view class="shopli sli" v-for="(vv,kk) in v.shop" :key="kk">
												{{vv.treeName}}
											</view>
											<view class="shopli smore" v-if="v.shop.length > 5" @click="v.showshopmore = 0">
												简要…
											</view>
										</block>
									</view>
								</view>
							</view>
							<view class="r" v-if="dm && nli==0" @click="toggle(v.aid)">
								<view>选择</view>
							</view>
						</view>
					</view>
				</block>
				<uni-load-more :status="status" :icon-size="16" :content-text="contentText" />
			</view>
		</view>
		<view class='goTop' v-show="floorstatus" @click="goTop"><text class="iconfont">&#xe600;</text></view>
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	var util = require("@/common/utils.js")
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue'
	export default {
		components: { uniLoadMore },
		data() {
			return {
				nli:0,
				keyword: '',
				list:[],
				page:1,
				total: 0,
				status: 'more',
				contentText: {
				  contentdown: '上拉加载更多',
				  contentrefresh: '加载中',
				  contentnomore: '没有更多'
				},
				floorstatus: false,
				dm:0,
			};
		},
		computed: {
		    ...mapState(['userid','hasLogin']),
		},
		onReachBottom() {
		  this.status = 'more';
		  this.getList();
		},
		onPageScroll(e) {
		  if (e.scrollTop > 100) {
		    this.floorstatus = true;
		  } else {
		    this.floorstatus = false;
		  }
		},
		onLoad({ dm }) {
			uni.showLoading({
				title: "加载中"
			});
			this.page = 1;
			this.getList()
			if(dm){
				this.dm = dm
			}
		},
		methods:{
			goTop(e) {
			  util.goTop(e);
			},
			changenavi(n){
				this.nli = n
				this.list = [];
				this.page = 1;
				this.getList();
			},
			searchStart() {
				if (this.keyword == '') {
					uni.showToast({
						title: '请输入关键字',
						icon: 'none',
						duration: 1000
					});
				}else{
					this.list = []
					this.page = 1
					
					this.getList()
				}
			},
			async getList(){
				let result = await this.$http({
					url:"yemuapp/canscript",
					data:{
						'userid':this.userid,
						'nli':this.nli,
						'page': this.page,
						'title': this.keyword,
					},
					method:'POST'
				})
				
				if(result.errcode == 0){
					result.data.map((v,k)=>{
						v.showshopmore = 0
					})
					if (this.page == 1) {
					  this.list = result.data;
					} else {
					  this.list = this.list.concat(result.data);
					}
					this.total = result.total;
					
					this.page += 1;
				} else {
					this.status = "noMore";
				}
				if (result.totalPage == result.page) {
					this.status = "noMore";
				}
				
				uni.hideLoading();
				
			},
			toggle(id,title) {
			    uni.navigateTo({
			      url: `/pagework/dm_play_set/dm_play_set?aid=${id}`
			    })
			},
			
		}
	}
</script>

<style lang="less">
.ksearch{
	margin: 10rpx auto;
	position: relative;
	input{
		background-color: #ddd;
		padding: 10rpx 70rpx;
		border-radius: 50rpx;
	}
	.search-icon{
		width: 36rpx;
		height: 36rpx;
		line-height: 36rpx;
		padding: 16rpx 20rpx 16rpx 0;
		position: absolute;
		left: 20rpx;
		top: -2rpx;
		z-index: 10;
	}
}
.listul{
	margin: 20rpx;
	.listli{
		background-color: #def;
		margin: 10rpx 0;
		border-radius: 10rpx;
		overflow: hidden;
		border:1rpx solid #bde;
		display: flex;
		align-items: stretch;
		.simage{
			width: 100rpx;
			height: 120rpx;
			margin: 5rpx;
			border-radius: 10rpx;
		}
		.tt{
			font-size: 28rpx;
			font-weight: bold;
		}
		.sinfo{
			width: 100%;
			margin-left: 10rpx;
			display: flex;
			align-items: stretch;
			.l{
				display: flex;
				flex-direction: column;
				justify-content: space-between;
			}
			.r{
				height: 120rpx;
				width: 100rpx;
				background-color: #063;
				line-height: 110rpx;
				text-align: center;
				color: #fff;
				margin: 5rpx;
				border-radius: 10rpx;
				animation: glow 1s ease-in-out infinite alternate;
			}
			@keyframes glow {
			    from {
			      text-shadow: 0 0 10rpx #fff, 0 0 20rx #fff, 0 0 30rpx #fff, 0 0 40rpx #ff00de, 0 0 70rpx #ff00de;
			    }
			    to {
			      text-shadow: 0 0 20rpx #fff, 0 0 30rpx #fff, 0 0 40rpx #ff00de, 0 0 50rpx #ff00de, 0 0 80rpx #ff00de;
			    }
			}
		}
		.shopbox{
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			.shopli,view{
				margin: 0 10rpx 5rpx 0;
				font-size: 20rpx;
				padding: 2rpx 8rpx;
				border-radius: 8rpx;
				color: #fff;
			}
			.sli{
				background-color: #69d;
			}
			.smore{
				background-color: #369;
			}
		}
	}
}
</style>
